<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello MiniUI!</title>
    <!--jQuery js-->
    <script th:src="@{/miniui/jquery.min.js}" type="text/javascript"></script>
    <!--MiniUI-->
    <link th:href="@{/miniui/miniui.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/miniui/miniui.js}" type="text/javascript"></script>
</head>
<body>

    <div id="userGrid" class="mini-datagrid" style="height: 100%; width: 100%;"></div>

    <script>
        $(function () {
            mini.parse();
            InitUserGrid();

        });


    function InitUserGrid() {
        $.ajax({
            url: "http://localhost:8080/users1",
            type: 'get',
            success: function (e) {
                var userGrid=mini.get("userGrid");
                console.log(e)
            }
        })

        // var userGrid=mini.get("userGrid");
        // userGrid.on("drawcell",function (e) {
        //     for (var i = 0; i < userGrid.length; i++) {
        //         var record = e.record, column = e.column, field = e.field, value = e.value;
        //         var  id= e.columns.id;
        //         var userName=e.columns.userName;
        //         var age=e.columns.age;
        //         e.cellHtml = "<div>" + id +age+ userName + "</div>";
        //     }
        // });
        //
        // var userName = mini.get("userName") != null ? mini.get("userName").getValue() : "";
        // var age = mini.get("age") != null ? mini.get("age").getValue() : "";
        // var id = mini.get("id") != null ? mini.get("id").getValue() : "";
        //
        // userGrid.load({
        //     "age": age,
        //     "id": id,
        //     "userName": userName
        // });

        /******************/

        // var columns = [
        // // {type: "indexcolumn"},
        //     {field: 'id', header: '编号', width: 50, align: 'left'},
        //     {field: 'userName', header: '姓名', width: 120, headerAlign: 'center', autoescape: true},
        //     {field: 'age', header: '年龄', width: 200, headerAlign: 'center', autoescape: true}
        // ];
        //
        // var grid = mini.get("userGrid");
        // grid.set({
        //     url: "http://localhost:8080/users1",
        //     sizeList: [50, 100],
        //     ajaxType: 'get',
        //     pageSize: 50,
        //     columns: columns,
        //     allowAlternating: true, //显示间行色
        //     multiSelect: true,
        //     fitColumns: false, //使用过滤行必须设定这个全充满，否则会有列对齐问题。
        //     allowCellEdit: true,
        //     allowCellSelect: true,
        //     showFilterRow: false,
        //     showModified: false,
        //     allowMoveColumn: false
        // });
        //
        // grid.load()
    }


    </script>
</body>
</html>